<template>
	<view>
		<u-navbar placeholder fixed autoBack border title="考勤明细"></u-navbar>

		<view class="d-p-30">
			<view class="card d-p-30">
				<view class="d-flex">
					<text class="d-font-32" style="font-weight: bold;">{{ nowDate }}月汇总</text>
				</view>

				<view class="d-flex d-text-center d-m-t-30">
					<view class="d-flex-1" style="color: #162233;">
						<view>
							<text style="font-size: 52rpx;font-weight: bold;">{{ count ? count.day : 0 }}</text>
						</view>
						<text class="d-font-24">考勤天数</text>
					</view>
					<view class="d-flex-1" style="color: #162233;">
						<view>
							<text style="font-size: 52rpx;font-weight: bold;">{{ count ? count.atdStaffs : 0 }}</text>
						</view>
						<text class="d-font-24">出勤天数</text>
					</view>
					<view class="d-flex-1" style="color: #162233;">
						<view>
							<text style="font-size: 52rpx;font-weight: bold;">{{ count ? count.unatdStaffs : 0 }}</text>
						</view>
						<text class="d-font-24">缺勤天数</text>
					</view>
				</view>
			</view>

			<view class="card d-p-30 d-m-t-30" style="padding-top: 0!important;"><calendar @onDayClick="setNowDateYMD" :open="false" disabledAfter></calendar></view>

			<view class="card d-p-30 d-m-t-30">
				<view class="d-font-32 d-text-center " style="color: #5D6672;font-weight: bold;">{{ name }}的进出场明细</view>
				<view class="d-text-center d-font-24 d-m-b-30" style="color: #5D6672;font-weight: bold;">{{ nowDataYMD }}</view>
				<view class="table d-text-center">
					<view class="tr">
						<view class="th">进出场规则</view>
						<view class="th">状态</view>
						<view class="th">进出时间</view>
						<view class="th">操作</view>
					</view>
					<view class="tr" v-for="(item, index) in list" :key="index">
						<view class="td">{{ item.gzdksj }}</view>
						<view class="td">{{ item.status == 1 ? '进场' : '离场' }}</view>
						<view class="td">{{ item.kqsj ? $moment(item.kqsj).format('hh:mm') : '' }}</view>
						<view class="td">
							<text class="d-m-r-10" style="color: #21A5F3;" v-if="item.image" @click="vPhoto(item.image)">预览</text>
							<!-- <text style="color: #21A5F3;" v-if="!item.dksj" @click="makeCard(item)">补卡</text> -->
						</view>
					</view>
				</view>
				<template v-if="!list || list.length <= 0">
					<view class="d-p-t-30"><u-empty text="暂无记录" icon="/static/image/none.png"></u-empty></view>
				</template>
			</view>
			<!-- <view class="card d-p-30 d-m-t-30">
				<view class="d-font-32 d-text-center " style="color: #5D6672;font-weight: bold;">{{ name }}的进出场明细</view>
				<view class="d-text-center d-font-24 d-m-b-30" style="color: #5D6672;font-weight: bold;">{{ nowDataYMD }}</view>
				<view class="table d-text-center">
					<view class="tr">
						<view class="th">进出场规则</view>
						<view class="th">{{ zwzc }}</view>
						<view class="th">进出时间</view>
					</view>
					<view class="tr" v-for="(item, index) in list" :key="index">
						<view class="td">{{ $moment(item).format('hh:mm') }}</view>
						<view class="td">{{ item.status == 1 ? '进场' : '离场' }}</view>
						<view class="td"></view>
					</view>
				</view>
				<template v-if="!list || list.length <= 0">
					<view class="d-p-t-30"><u-empty text="暂无记录" icon="/static/image/none.png"></u-empty></view>
				</template>
			</view> -->
		</view>
	</view>
</template>

<script>
import calendar from './calendar.vue';
import { psatd, makeUpCard } from '../../../common/api.js';
export default {
	components: {
		calendar
	},
	data() {
		return {
			bzid: null,
			rybh: null,
			gcbh: null,
			zwzc: null,
			name: null,
			nowDate: null,
			count: null,
			nowDataYMD: null,
			dayCount: null,
			list: []
		};
	},
	onLoad(e) {
		this.bzid = e.bzid;
		this.rybh = e.rybh;
		this.name = e.name;
		this.zwzc = e.zwzc;
		this.gcbh = e.gcbh;
		this.nowDate = this.$moment().format('YYYY-MM');
		this.nowDataYMD = this.$moment().format('YYYY-MM-DD');
		this.init();
	},
	methods: {
		init() {
			psatd({
				params: {
					bzid: this.bzid,
					rybh: this.rybh,
					date: this.nowDate
				}
			}).then(e => {
				this.count = e.data;
			});
			this.getDayData();
		},
		getDayData() {
			makeUpCard({
				rybh: this.rybh,
				bksj: this.nowDataYMD,
				gcbh: this.gcbh,
				bzid: this.bzid
			}).then(e => {
				if (e.data) {
					this.list = e.data;
				} else {
					uni.$u.toast('当前项目未配置考勤规则');
				}
			});
		},
		setNowDateYMD(e) {
			this.nowDataYMD = e.date;
			this.getDayData();
		},
		vPhoto(e) {
			if (!e) {
				return uni.$u.toast('暂无可预览图片');
			}
			uni.previewImage({
				count: e,
				urls: [e]
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #fbfcfc;
}
.card {
	box-shadow: 0rpx 5rpx 10rpx rgba(0, 0, 0, 0.05);
	border-radius: 10rpx;
	background-color: #ffffff;

	.table {
		font-size: 28rpx;
		display: table;
		width: 100%;
		vertical-align: middle;
		border: 1px solid #f6f7f8;
		.tr {
			display: table-row;
			.th,
			.td {
				display: table-cell;
				height: 80rpx;
				vertical-align: middle;
			}
			.th {
				font-weight: bold;
				color: #162233;
			}
			&:nth-child(2n-1) {
				background-color: #f6f7f8;
			}
		}
	}
}
</style>
